<html>
    <head>
        <title>jQuery Notify Plugin Examples</title>
        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="js/jquery.jcorners.js"></script>
        <script type="text/javascript" src="../jquery.notify.js"></script>
        <link rel="stylesheet" type="text/css" href="../notify.css" />
        <script type="text/javascript">
            $(function(){
                $(".eventtest").click(function(){
                    alert("click through!");
                });
            });
        </script>
        <style>
            body {font-family: Arial,sans-serif;}
            h1 {font-size: 20pt;}
            h2 {font-size: 16pt; margin: 1em 0;}
            h1, h2 {font-family: Helvetica,Arial,sans-serif;}
            dt {
                font-weight: bold;
                margin: 1em 0 0 0;
            }
            dd {
                font-weight: normal;
                margin: 0.2em 0 0.5em 0;
                padding: 0;
                width: 42em;
            }
            p {
                margin: 0.2em 0 0.5em 0;
                width: 42em;
            }
            .eventtest {
                width: 100px;
                height: 50px;
                background: #00f;
                cursor: pointer;
                position: absolute;
                top: 20px;
                right: 150px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <h1>jQuery Notify Plugin</h1>
        <dl>
            <dt>Author</dt><dd><a href="http://caolanmcmahon.com">Caolan McMahon</a> (<a href="http://twitter.com/caolan">@caolan</a>)</dd>
            <dt>License</dt><dd>Dual licensed under the MIT and GPL licenses. See <a href="http://docs.jquery.com/License">http://docs.jquery.com/License</a></dd>
            <dt>Description</dt>
            <dd>
                <p>
                    Attempts to implement notifications similar to those
                    available in Ubuntu since Jaunty Jackalope (9.04).
                    This plugin presents notifications as "ephemeral overlays,
                    which can be clicked through so they don't block your work".
                </p>
                <p>For more information, see the following:</p>
                <ul>
                    <li><a href="http://www.markshuttleworth.com/archives/253">http://www.markshuttleworth.com/archives/253</a></li>
                    <li><a href="http://launchpad.net/notify-osd">http://launchpad.net/notify-osd</a></li>
                </ul>
            </dd>
        </dl>
        <h2>Examples</h2>
        <p>Click on the buttons below to create some example notifications</p>
        <form action="" method="GET">
            <input type="button" onclick="javascript:$.notify({text:'This notification has an error icon', title:'Error', icon:'images/dialog-error.png'});" value="Error">
            <input type="button" onclick="javascript:$.notify({text:'This notification has an information icon', title:'Information', icon:'images/dialog-information.png'});" value="Information">
            <input type="button" onclick="javascript:$.notify({text:'This notification has a warning icon', title:'Warning', icon:'images/dialog-warning.png'});" value="Warning">
        </form>
        <p>
            You should be able to hover over the notifications, at which point
            they should become transparent, and the cursor will change to reflect
            the styles for the elements below it. Clicking on an element beneath
            a notification should trigger the click event for that element.
        </p>
        <h2>Download</h2>
        <p>For now, please get the source code from <a href="http://github.com/caolan/jquery.notify.js">GitHub</a>.</p>
        <div class="eventtest">click through!</div>
    </body>
</html>
